<template>
  <el-row class="tac" style="width: 60%;margin: 0 auto">

    <el-col span="4" style="position:fixed;left:13%">
      <el-menu
          :default-active=group_index
          class="el-menu-vertical-demo">
<!--主页--关注--粉丝--点赞-->
        <el-menu-item index="4-1" @click="jump('个人','4-1','')">
          <i class="el-icon-sunny"></i>
          <span slot="title" >我的主页</span>
        </el-menu-item>

        <el-menu-item index="4-2" @click="jump('关注','4-2','users')">
          <i class="el-icon-document"></i>
          <span slot="title">我的关注</span>
        </el-menu-item>

        <el-menu-item index="4-3" @click="jump('粉丝','4-3','users')">
          <i class="el-icon-document"></i>
          <span slot="title" >我的粉丝</span>
        </el-menu-item>

        <el-menu-item index="4-4" @click="jump('点赞','4-4','blogs')">
          <i class="el-icon-document"></i>
          <span slot="title" >我的赞</span>
        </el-menu-item>
      </el-menu>
    </el-col>

<!--博客展示-->
    <el-col span="15" style=" margin-left: 15.8%">

      <router-view :blogIDList="blogIDList" v-if="tag"/>

      <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto;padding-left: 0px;
    margin-top: 0px;" v-if="!tag">
        <li v-for="id in userIDList" class="infinite-list-item">
          <router-view :userID='id'/>
        </li>
      </ul>
    </el-col>
<!--粉丝和关注用户-->
<!--按月搜索博客-->
    <el-col span="5" style="position:fixed;left: 66.8%">
      <el-card>
        <div slot="header" class="clearfix">
          <span>按月搜索</span>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
              v-model="month"
              type="month"
              placeholder="选择月">
          </el-date-picker>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {getBlogs,getUserList,thumbsUpBlog} from "@/api/api";
import {getSession, getToken,setSession} from "@/utils/Token";

export default {
  name: "heat_main",
  data(){
    return{
      group_index:'4-1',
      /*标记进入那个页面*/
      tag:true,
      month:'',
      blogIDList:[],
      userIDList:[],
    };
  },
  methods:{
    /*粉丝,关注请求*/
    towRequest(str,str1){
      getUserList(str).then((res)=>{
        if(res.data.status === 200){
          this.userIDList = res.data.data;
          if(this.$route.path === '/oneself/'+ str1) {
            this.$router.push('/oneself');
          }
          this.tag = false;
          this.$router.push('/oneself/' + str1);
        }
      })
    },
/*页面跳转*/
    jump(title,index,str){
      setSession('group_index',index);
      setSession('title1',title);
      setSession("activeIndex",'1-1-1');
      if(title === '个人' || title==='点赞'){
        setSession('title',title + '-全部');
        if(title === '个人'){
          getBlogs('个人-全部',getToken('userId')).then((res)=>{
            if(res.data.status === 200){
              this.blogIDList = res.data.data;
              if(this.$route.path != '/oneself/'+ str) {
                this.tag = true;
                this.$router.push('/oneself/' + str);
              }
            }
          })
        }else{
          thumbsUpBlog().then((res)=>{
            if(res.data.status === 200){
              this.blogIDList = res.data.data;
              if(this.$route.path != '/oneself'+ str) {
                this.tag = true;
                this.$router.push('/oneself/' + str);
              }
            }
          })
        }
      }else{
        setSession('title',title + '-用户');
        if(title === '关注'){
          this.towRequest('concern',str);
        }else{
          this.towRequest('fans',str);
        }
      }
    },
  },
/*创建时请求用户博客*/
  created() {
    getBlogs(getSession('title'),getToken('userId')).then((res)=>{
      if(res.data.status === 200){
        this.blogIDList = res.data.data
      }
    })
  },
/*挂载时对数据进行校验*/
  mounted() {
    this.group_index = sessionStorage.getItem('group_index');
  }
}
</script>

<style >

</style>